<template>
  <a-modal
    :maskClosable="maskClosable"
    title="设置"
    :width="650"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        v-if="visible"
        class="rule-box"
        ref="ruleForm"
        :model="form"
        :rules="formRules"
        :labelCol="{ span: 10 }"
        :wrapperCol="{ span: 14 }"
      >
        <a-form-model-item
          label="最优成本代价模型-评分阈值"
          prop="costThreshold"
        >
          <a-input
            style="width: 30%"
            autocomplete="off"
            :max-length="7"
            placeholder="阈值"
            v-model="form.costThreshold"
            @keyup="clearNoNum('costThreshold')"
            @blur="clearNoNum('costThreshold')"
          />
        </a-form-model-item>

        <a-form-model-item
          label="最优设备代价模型-评分阈值"
          prop="deviceThreshold"
        >
          <a-input
            style="width: 30%"
            autocomplete="off"
            :max-length="7"
            placeholder="阈值"
            v-model="form.deviceThreshold"
            @keyup="clearNoNum('deviceThreshold')"
            @blur="clearNoNum('deviceThreshold')"
          />
        </a-form-model-item>
        <a-form-model-item
          label="最优能效代价模型-评分阈值"
          prop="powerThreshold"
        >
          <a-input
            style="width: 30%"
            autocomplete="off"
            :max-length="7"
            placeholder="阈值"
            v-model="form.powerThreshold"
            @keyup="clearNoNum('powerThreshold')"
            @blur="clearNoNum('powerThreshold')"
          />
        </a-form-model-item>
        <a-form-model-item
          label="配电子网均衡代价模型-评分阈值"
          prop="electricThreshold"
        >
          <a-input
            style="width: 30%"
            autocomplete="off"
            :max-length="7"
            placeholder="阈值"
            v-model="form.electricThreshold"
            @keyup="clearNoNum('electricThreshold')"
            @blur="clearNoNum('electricThreshold')"
          />
        </a-form-model-item>

        <a-form-model-item label="最优应用模型-评分阈值" prop="appThreshold">
          <a-input
            style="width: 30%"
            autocomplete="off"
            :max-length="7"
            placeholder="阈值"
            v-model="form.appThreshold"
            @keyup="clearNoNum('appThreshold')"
            @blur="clearNoNum('appThreshold')"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { postAction } from "@/api/manage";
import { filterToFloat } from "@/utils/util";

export default {
  name: "ConfigModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      model: {},
      form: {
        costThreshold: undefined,
        deviceThreshold: undefined,
        appThreshold: undefined,
        powerThreshold: undefined,
        electricThreshold: undefined,
      },
      meterList: [
        {
          chnName: "最优成本代价模型",
          meter: "DATACENTER_COST",
        },
        {
          chnName: "最优设备代价模型",
          meter: "DATACENTER_DEVICE",
        },
        {
          chnName: "最优应用模型",
          meter: "APP",
        },
        {
          chnName: "最优能耗代价模型",
          meter: "DATACENTER_POWER",
        },
        {
          chnName: "配电子网均衡代价模型",
          meter: "DATACENTER_ELECTRIC",
        },
      ],
      levelMap: {
        1: "一般",
        2: "重要",
        3: "严重",
      },
      appInfo: {},
      maskClosable: false,
      formRules: {
        costThreshold: [
          {
            required: true,
            message: "请输入最优成本代价模型的评分阈值",
            trigger: "blur",
          },
        ],
        deviceThreshold: [
          {
            required: true,
            message: "请输入最优设备代价模型的评分阈值",
            trigger: "blur",
          },
        ],
        powerThreshold: [
          {
            required: true,
            message: "请输入最优能耗代价模型的评分阈值",
            trigger: "blur",
          },
        ],
        electricThreshold: [
          {
            required: true,
            message: "请输入最优配电子网均衡模型的评分阈值",
            trigger: "blur",
          },
        ],
        appThreshold: [
          {
            required: true,
            message: "请输入最优应用模型的评分阈值",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    clearNoNum(fieldName) {
      let threshold = filterToFloat(this.form[fieldName]);

      if (isNaN(threshold)) {
        threshold = 0;
      } else if (parseFloat(threshold) > 100) {
        threshold = 100;
      }
      this.form[fieldName] = threshold;
    },
    config(data) {
      this.visible = true;
      this.appInfo = data;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.form.costThreshold = undefined;
        this.form.deviceThreshold = undefined;
        this.form.appThreshold = undefined;
        this.form.powerThreshold = undefined;
        this.form.electricThreshold = undefined;
        if (data.schedulerConfigList) {
          data.schedulerConfigList.forEach((d) => {
            if (d.thresholdKey === "DATACENTER_COST") {
              this.form.costThreshold = d.thresholdValue;
            } else if (d.thresholdKey === "APP") {
              this.form.appThreshold = d.thresholdValue;
            } else if (d.thresholdKey === "DATACENTER_DEVICE") {
              this.form.deviceThreshold = d.thresholdValue;
            } else if (d.thresholdKey === "DATACENTER_POWER") {
              this.form.powerThreshold = d.thresholdValue;
            } else if (d.thresholdKey === "DATACENTER_ELECTRIC") {
              this.form.electricThreshold = d.thresholdValue;
            }
          });
        }

        if (this.form.costThreshold !== 0) {
          this.form.costThreshold = this.form.costThreshold
            ? this.form.costThreshold
            : undefined;
        }
        if (this.form.appThreshold !== 0) {
          this.form.appThreshold = this.form.appThreshold
            ? this.form.appThreshold
            : undefined;
        }
        if (this.form.deviceThreshold !== 0) {
          this.form.deviceThreshold = this.form.deviceThreshold
            ? this.form.deviceThreshold
            : undefined;
        }
        if (this.form.deviceThreshold !== 0) {
          this.form.powerThreshold = this.form.powerThreshold
            ? this.form.powerThreshold
            : undefined;
        }
        if (this.form.deviceThreshold !== 0) {
          this.form.electricThreshold = this.form.electricThreshold
            ? this.form.electricThreshold
            : undefined;
        }
      });
    },
    handleOk(e) {
      this.$refs.ruleForm.validate((error) => {
        if (error) {
          this.confirmLoading = true;
          let postData = {
            datacenterId: this.appInfo.id,
            // thresholdKey: this.form.meter,
            // thresholdValue: this.form.threshold,
            title: "多数据中心调度-动态调度机制-调度触发策略设置",
            content: "调度触发策略设置",
          };
          postData.schedulerConfigList = [
            {
              thresholdKey: "DATACENTER_COST",
              thresholdValue: parseFloat(this.form.costThreshold),
            },
            {
              thresholdKey: "DATACENTER_DEVICE",
              thresholdValue: parseFloat(this.form.deviceThreshold),
            },
            {
              thresholdKey: "APP",
              thresholdValue: parseFloat(this.form.appThreshold),
            },
            {
              thresholdKey: "DATACENTER_POWER",
              thresholdValue: parseFloat(this.form.powerThreshold),
            },
            {
              thresholdKey: "DATACENTER_ELECTRIC",
              thresholdValue: parseFloat(this.form.powerThreshold),
            },
          ];

          postAction("/app/update_scheduler_config", postData)
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.$emit("ok");
              }
            })
            .finally(() => {
              this.handleCancel();
            });
        }
      });
    },
    handleCancel() {
      this.confirmLoading = false;
      this.visible = false;
    },
  },
};
</script>

<style scoped>
</style>
